<!--
 * @Author: 王坤
 * @LastEditors: 王坤
 * @Description: 状态
-->
<template>
  <div
    :class="{
      'lc-status': true,
      'lc-status--point': withPoint
    }"
    :style="customStyles"
  >
    {{ reLabel }}
  </div>
</template>

<script setup>
import { getOptionsFromDict } from '@/apis';
import { computed, ref } from 'vue';
const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ''
  },
  label: {
    type: String,
    default: '标签'
  },
  withPoint: {
    type: Boolean,
    default: false
  },
  optionsDict: {
    type: [String, Number],
    default: ''
  },
  dictConfigList: {
    type: Array,
    default: () => []
  }
});
let reDictConfigList = ref(props.dictConfigList);
/* ========== computed start ==========  */
const getDictConfig = computed(() =>
  reDictConfigList.value.find((e) => e.value === props.modelValue)
);
const reLabel = computed(() => getDictConfig.value?.label || props.label);
const customStyles = computed(() =>
  getDictConfig.value ? { '--color': getDictConfig.value.color } : {}
);
/* ========== computed end ==========  */
async function loadOptions() {
  if (!props.optionsDict) return;
  const res = getOptionsFromDict(props.optionsDict, {});
  reDictConfigList.value = (res || []).map((item) => {
    const { label, value } = item;
    const tagDictConfig = props.dictConfigList.find((t) => t.value === item.value);
    return {
      label,
      value,
      color: tagDictConfig?.color || ''
    };
  });
}
loadOptions();
</script>
